<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="督办">
			<!-- <view slot="right" @click="search">
				<u-icon name="search" size="20" color="#162233"></u-icon>
			</view> -->
		</u-navbar>
		<d-select :options="options" @query="search"></d-select>

		<view class="d-p-30">
			<view class="card d-p-30">
				<view class="d-flex"><view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">预警督办</view></view>
				<view class="d-flex d-text-center d-m-t-20">
					<view class="d-flex-1" style="color: #162233;">
						<text class="d-font-24" style="color: #4E5C70;">在建项目</text>
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ info ? info.zjxm : 0 }}</text>
							<text class="d-font-20">个</text>
						</view>
					</view>
					<view class="d-flex-1" style="color: #162233;">
						<text class="d-font-24" style="color: #4E5C70;">今日督办</text>
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ info ? info.jrdb : 0 }}</text>
							<text class="d-font-20">个</text>
						</view>
					</view>
					<view class="d-flex-1" style="color: #162233;">
						<text class="d-font-24" style="color: #4E5C70;">本月督办</text>
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ info ? info.bydb : 0 }}</text>
							<text class="d-font-20">个</text>
						</view>
					</view>
					<view class="d-flex-1" style="color: #162233;">
						<text class="d-font-24" style="color: #4E5C70;">历史督办</text>
						<view>
							<text style="font-size: 52rpx;font-weight: bold;">{{ info ? info.lsdb : 0 }}</text>
							<text class="d-font-20">个</text>
						</view>
					</view>
				</view>
			</view>
			<view class="d-m-t-30 d-flex">
				<text class="d-font-36 d-flex-1" style="font-weight: bold;">督办列表</text>
				<view class="d-font-28 d-flex" style="color: #ADB4BD;" @click="show = true">
					<text class="d-m-r-10">{{ type }}</text>
					<u-icon name="arrow-down" color="#505355" size="28rpx"></u-icon>
				</view>
			</view>

			<template v-if="list && list.length > 0">
				<view class="card d-m-t-30 d-p-30" v-for="(item, index) in list" :key="index">
					<view class="d-flex d-font-24" style="color: #5D6672;">
						<view class="d-flex-1 d-flex">
							<text>项目名称</text>
							<text class="d-m-l-20 d-flex-1 u-line-1" style="color: #162233;width: 260rpx;">{{ item.xmmc || '无' }}</text>
						</view>
						<view class="d-flex" style="width: 260rpx;">
							<text>预警类型</text>
							<text class="d-m-l-20 d-flex-1 u-line-1" style="color: #162233;width: 160rpx;">{{ item.yjlx || '无' }}</text>
						</view>
					</view>
					<view class="d-flex d-font-24 d-m-t-20" style="color: #5D6672;">
						<view class="d-flex-1 d-flex">
							<text>所属区划</text>
							<text class="d-m-l-20 d-flex-1 u-line-1" style="color: #162233;width: 260rpx;">{{ item.districtName || '无' }}</text>
						</view>
						<view class="d-flex" style="width: 260rpx;">
							<text>预警时间</text>
							<text class="d-m-l-20 d-flex-1 u-line-1" style="color: #162233;width: 260rpx;">{{ item.yjsj || '无' }}</text>
						</view>
					</view>
					<view class="d-flex d-font-24 d-m-t-20" style="color: #5D6672;">
						<view class="d-flex-1 d-flex">
							<text>建设单位</text>
							<text class="d-m-l-20 d-flex-1 u-line-1" style="color: #162233;width: 260rpx;">{{ item.jsdw || '无' }}</text>
						</view>
						<view class="d-flex" style="width: 260rpx;">
							<text>督办时间</text>
							<text class="d-m-l-20 d-flex-1 u-line-1" style="color: #162233;width: 160rpx;">{{ item.dbsj || '无' }}</text>
						</view>
					</view>
					<view class="d-flex d-font-24 d-m-t-20" style="color: #5D6672;">
						<view class="d-flex-1 d-flex">
							<text>施工单位</text>
							<text class="d-m-l-20 d-flex-1 u-line-1" style="color: #162233;width: 260rpx;">{{ item.sgdw || '无' }}</text>
						</view>
						<view class="d-flex" style="width: 260rpx;">
							<text>解除时间</text>
							<text class="d-m-l-20 d-flex-1 u-line-1" style="color: #162233;width: 260rpx;">{{ item.jcsj || '无' }}</text>
						</view>
					</view>
					<view class="d-flex d-font-24 d-m-t-20" style="color: #5D6672;">
						<view class="d-flex-1 d-flex">
							<text>督办机构</text>
							<text class="d-m-l-20 d-flex-1 u-line-1" style="color: #162233;width: 260rpx;">{{ item.dbjg || '无' }}</text>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="d-p-t-80"><u-empty icon="/static/image/none.png" text="暂无数据"></u-empty></view>
			</template>
		</view>
		<u-picker :show="show" title="请选择" :columns="select" closeOnClickOverlay @clear="show = false" @close="show = false" @confirm="setType"></u-picker>
	</view>
</template>

<script>
import { supervise, sups, dictList, appNation } from '../../../common/api.js';
export default {
	data() {
		return {
			pageNum: 1,
			pageSize: 1,
			pageLast: 1,
			list: [],
			options: [],
			info: null,
			queryParams: {},
			type: '本月督办',
			show: false,
			select: [['本月督办', '历史督办']]
		};
	},
	onLoad() {
		this.init();
	},
	onReachBottom() {
		if (this.pageLast > this.pageNum) {
			++this.pageNum;
			this.getData().then(e => {
				this.list = this.list.concat(e.data);
			});
		}
	},
	methods: {
		init() {
			let district, xmtype;
			appNation()
				.then(e => {
					district = e.data.map(e => {
						return {
							id: e.districtId,
							label: e.districtName
						};
					});
				})
				.then(() => {
					// 项目类型
					return dictList({
						type: 'xmtype'
					}).then(e => {
						xmtype = e.data.map(e => {
							return {
								id: e.dictValue,
								label: e.dictLabel
							};
						});
					});
				})
				.then(() => {
					this.options = [
						{
							label: '属地',
							name: 'districtId',
							children: district
						},
						{
							label: '项目类型',
							name: 'xmtype',
							children: xmtype
						}
					];
				})
				.then(() => {
					this.start();
				});
		},
		start() {
			supervise({
				params: {
					deptId: this.$user.deptId,
					...this.queryParams
				}
			}).then(e => {
				this.info = e.data;
			});
			this.pageNum = 1;
			this.getData().then(e => {
				if (e.data && typeof e.data != 'string') {
					this.list = e.data;
				}
				this.pageLast = Math.ceil(e.total / this.pageSize);
			});
		},
		getData() {
			return sups({
				params: {
					deptId: this.$user.deptId,
					...this.queryParams,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					type: this.type
				}
			});
		},
		search(e) {
			this.queryParams = e;
			this.start();
		},
		setType(e) {
			this.show = false;
			this.type = this.select[0][e.indexs];
			this.start();
		}
	}
};
</script>

<style lang="scss">
.card {
	box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 10rpx;
	background-color: #ffffff;
	.sub-title {
		position: relative;
		padding-left: 20rpx;
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 8rpx;
			height: 22rpx;
			background: #13a4fe;
			border-radius: 4rpx;
			bottom: 0;
			margin: auto;
		}
	}
}
page {
	background-color: #fbfcfc;
}
</style>
